<template>
	<view class="container">
		<u-skeleton :rowsWidth="['50%', '60%', '80%', '80%', '80%', '80%', '80%', '80%']" rows="10" :loading="loading"
			:title="false" rowsHeight="36">
			<view class="item">
				<u-swiper height="320" radius="8" :list="swiperList" indicator indicatorMode="line" circular></u-swiper>
				<!-- <view class="title"></view> -->
				<view class="title-box">
					<view class="model-detail">{{title}} <br style="margin-top: 7px;"> {{selectSaleName}} {{selectCC}}
					</view>
				</view>
				<view class="tab">
					<block v-for="(item,index) in items1" :key="index">
						<text :class="['',Inv1== index?'on':'']" @click="Inv1=index">{{item}}</text>
					</block>
				</view>
				<view v-show="Inv1 == 0">
					<!-- <picker mode="selector" :range="saleNames" @change="onSaleNameChange" class="sale-name-picker">
						<view class="picker">
							{{ selectedSaleName || '请选择销售名称' }}
						</view>
					</picker> -->

					<!-- <scroll-view class="brdge" scroll-x="true" scroll-with-animation>
						<block v-for="(saleName, index) in saleNames" :key="index">
							<view :class="['', selectedSaleName == saleName ? 'on' : '']"
								@click="selectSaleName(saleName)">
								{{ saleName }}
							</view>
						</block>
					</scroll-view> -->

					<scroll-view class="brdge" scroll-x="true" scroll-with-animation>
						<block v-for="(item, index) in list" :key="index">
							<view :class="['', active == index ? 'on' : '']" @click="yearClick(index, item.carId)">
								<!-- {{item.saleName||item.carName||""}} -->{{" "+getDisplayName(item)}}
							</view>
						</block>
					</scroll-view>

					<!-- <scroll-view v-if="selectedSaleName" class="brdge" scroll-x="true" scroll-with-animation>
						<block v-for="year in saleYears[selectedSaleName]" :key="year">
							<view
								:class="['', active == list.findIndex(item => item.saleName === selectedSaleName && item.carYear === year) ? 'on' : '']"
								@click="yearClick(year)">
								{{ year }}
							</view>
						</block>
					</scroll-view> -->

					<!-- 					<view class="tit">车型参数</view> -->
					<view class="car-box">
						<view v-for="(item, index) in list" :key="index" v-show="index == active">
							<view style="margin-bottom: 46rpx;margin-top: 20rpx;">
								<view style="display: flex;justify-content: space-between;">
									<view>
										<text class="section-label">近光灯: <text
												@click="fetchProductList(item.jinDeng.trim())"
												class="uni-flex-item-lamp">{{ item.jinDeng ? item.jinDeng : '' }}</text></text>
									</view>
									<!-- 如果需要“更多”按钮，可以取消注释 -->
									<!-- <view>
							            <text class="section-label">更多</text>
							        </view> -->
								</view>
								<view class="product-grid">
									<view class="product-item" v-for="(jin, index) in jinDengList.slice(0, 2)"
										:key="index">
										<view @click="skipToDetails(jin.categoryId)">
											<image :src="jin.productImage" mode="aspectFill" class="product-image">
											</image>
										</view>
									</view>
									<view class="product-info" @click="skipToDetails(jin.categoryId)"
										:style="{ width: jinDengList.length === 1 ? '100%' : '48%' }"
										v-for="(jin, index) in jinDengList.slice(0, 2)" :key="index">
										<text class="product-name">{{ jin.productName }}</text>
										<text style="font-weight: bold;" v-if="userType == 'STORE'"
											class="salePrice">￥{{ jin.proxyPrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'CAR'"
											class="salePrice">￥{{ jin.salePrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'SALE'"
											class="salePrice">￥{{ jin.productPrice }}</text>
									</view>
								</view>
							</view>

							<view style="margin-bottom: 46rpx;">
								<view style="display: flex; justify-content: space-between;">
									<view>
										<text class="section-label">远光灯: <text
												@click="fetchProductList(item.yuanDeng.trim())"
												class="uni-flex-item-lamp">{{ item.yuanDeng ? item.yuanDeng : '' }}</text></text>
									</view>
									<!-- 如果需要“更多”按钮，可以取消注释 -->
									<!-- <view>
							            <text class="section-label">更多</text>
							        </view> -->
								</view>
								<view class="product-grid">
									<view class="product-item" v-for="(yuan, index) in yuanDengList.slice(0, 2)"
										:key="index">
										<view @click="skipToDetails(yuan.categoryId)">
											<image :src="yuan.productImage" mode="aspectFill" class="product-image">
											</image>
										</view>
									</view>
									<view class="product-info" @click="skipToDetails(yuan.categoryId)"
										:style="{ width: yuanDengList.length === 1 ? '100%' : '48%' }"
										v-for="(yuan, index) in yuanDengList.slice(0, 2)" :key="index">
										<text class="product-name">{{ yuan.productName }}</text>
										<text style="font-weight: bold;" v-if="userType == 'STORE'"
											class="salePrice">￥{{ yuan.proxyPrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'CAR'"
											class="salePrice">￥{{ yuan.salePrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'SALE'"
											class="salePrice">￥{{ yuan.productPrice }}</text>
									</view>
								</view>
							</view>

							<view style="margin-bottom: 46rpx;">
								<view style="display: flex; justify-content: space-between;">
									<view>
										<text class="section-label">雾灯: <text
												@click="fetchProductList(item.wuDeng.trim())"
												class="uni-flex-item-lamp">{{ item.wuDeng ? item.wuDeng : '' }}</text></text>
									</view>
									<!-- 如果需要“更多”按钮，可以取消注释 -->
									<!-- <view>
							            <text class="section-label" @click="fetchProductList(item.wuDeng.trim())">更多</text>
							        </view> -->
								</view>
								<view class="product-grid">
									<view class="product-item" v-for="(wu, index) in WuDengList.slice(0, 2)"
										:key="index">
										<view @click="skipToDetails(wu.categoryId)">
											<image :src="wu.productImage" mode="aspectFill" class="product-image">
											</image>
										</view>
									</view>
									<view class="product-info" @click="skipToDetails(wu.categoryId)"
										:style="{ width: WuDengList.length === 1 ? '100%' : '48%' }"
										v-for="(wu, index) in WuDengList.slice(0, 2)" :key="index">
										<text class="product-name">{{ wu.productName }}</text>
										<text style="font-weight: bold;" v-if="userType == 'STORE'"
											class="salePrice">￥{{ wu.proxyPrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'CAR'"
											class="salePrice">￥{{ wu.salePrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'SALE'"
											class="salePrice">￥{{ wu.productPrice }}</text>
									</view>
								</view>
							</view>

							<view style="margin-bottom: 46rpx;" v-if="item.jieMa && !item.jieMa.includes('不')">
								<view style="display: flex; justify-content: space-between;">
									<view>
										<text class="section-label">解码器: <text
												@click="fetchProductList(item.jieMa.trim())"
												class="uni-flex-item-lamp">{{ item.jieMa }}</text></text>
									</view>
									<!-- 如果需要“更多”按钮，可以取消注释 -->
									<!-- <view>
							            <text class="section-label" @click="fetchProductList(item.jieMa.trim())">更多</text>
							        </view> -->
								</view>
								<view class="product-grid">
									<view class="product-item" v-for="(jieMaItem, index) in jieMaList.slice(0, 2)"
										:key="index">
										<view @click="skipToDetails(jieMaItem.categoryId)">
											<image :src="jieMaItem.productImage" mode="aspectFill"
												class="product-image"></image>
										</view>
									</view>
									<view class="product-info" @click="skipToDetails(jieMaItem.categoryId)"
										:style="{ width: jieMaList.length === 1 ? '100%' : '48%' }"
										v-for="(jieMaItem, index) in jieMaList.slice(0, 2)" :key="index">
										<text class="product-name">{{ jieMaItem.productName }}</text>
										<text style="font-weight: bold;" v-if="userType == 'STORE'"
											class="salePrice">￥{{ jieMaItem.proxyPrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'CAR'"
											class="salePrice">￥{{ jieMaItem.salePrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'SALE'"
											class="salePrice">￥{{ jieMaItem.productPrice }}</text>
									</view>
								</view>
							</view>

							<view style="margin-bottom: 46rpx;" v-if="item.jinKaPan && !item.jinKaPan.includes('不')">
								<view style="display: flex; justify-content: space-between;">
									<view>
										<text class="section-label">近光卡座: <text
												@click="fetchProductList(item.jinKaPan.trim())"
												class="uni-flex-item-lamp">{{ item.jinKaPan }}</text></text>
									</view>
									<!-- 如果需要“更多”按钮，可以取消注释 -->
									<!-- <view>
							            <text class="section-label" @click="fetchProductList(item.jinKaPan.trim())">更多</text>
							        </view> -->
								</view>
								<view class="product-grid">
									<view class="product-item" v-for="(kapan, index) in jinKaPanList.slice(0, 2)"
										:key="index">
										<view @click="skipToDetails(kapan.categoryId)">
											<image :src="kapan.productImage" mode="aspectFill" class="product-image">
											</image>
										</view>
									</view>
									<view class="product-info" @click="skipToDetails(kapan.categoryId)"
										:style="{ width: kaPanList.length === 1 ? '100%' : '48%' }"
										v-for="(kapan, index) in kaPanList.slice(0, 2)" :key="index">
										<text class="product-name">{{ kapan.productName }}</text>
										<text style="font-weight: bold;" v-if="userType == 'STORE'"
											class="salePrice">￥{{ kapan.proxyPrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'CAR'"
											class="salePrice">￥{{ kapan.salePrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'SALE'"
											class="salePrice">￥{{ kapan.productPrice }}</text>
									</view>
								</view>
							</view>

							<view style="margin-bottom: 46rpx;" v-if="item.kapan && !item.kapan.includes('不')">
								<view style="display: flex; justify-content: space-between;">
									<view>
										<text class="section-label">远光卡座: <text
												@click="fetchProductList(item.kapan.trim())"
												class="uni-flex-item-lamp">{{ item.kapan }}</text></text>
									</view>
									<!-- 如果需要“更多”按钮，可以取消注释 -->
									<!-- <view>
							            <text class="section-label" @click="fetchProductList(item.kapan.trim())">更多</text>
							        </view> -->
								</view>
								<view class="product-grid">
									<view class="product-item" v-for="(kapan, index) in kaPanList.slice(0, 2)"
										:key="index">
										<view @click="skipToDetails(kapan.categoryId)">
											<image :src="kapan.productImage" mode="aspectFill" class="product-image">
											</image>
										</view>
									</view>
									<view class="product-info" @click="skipToDetails(kapan.categoryId)"
										:style="{ width: kaPanList.length === 1 ? '100%' : '48%' }"
										v-for="(kapan, index) in kaPanList.slice(0, 2)" :key="index">
										<text class="product-name">{{ kapan.productName }}</text>
										<text style="font-weight: bold;" v-if="userType == 'STORE'"
											class="salePrice">￥{{ kapan.proxyPrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'CAR'"
											class="salePrice">￥{{ kapan.salePrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'SALE'"
											class="salePrice">￥{{ kapan.productPrice }}</text>
									</view>
								</view>
							</view>


							<view class="list">
								<view class="info-item" v-if="carInfo.gsJinDengName && carInfo.gsJinDengName != null">
									<text class="label">格栅灯</text>
									<view class="value" @click="fetchProductList(carInfo.gsJinDengName)">
										{{carInfo.gsJinDengName}}
									</view>
								</view>
								<view class="info-item" v-if="carInfo.gsYuanDengName && carInfo.gsYuanDengName != null">
									<text class="label">格栅灯</text>
									<view class="value" @click="fetchProductList(carInfo.gsYuanDengName)">
										{{carInfo.gsYuanDengName}}
									</view>
								</view>

								<view class="info-item" v-if="carInfo.gsSize">
									<text class="label">格栅尺寸</text>
									<view class="value">{{carInfo.gsSize}}</view>
								</view>
								<view class="uni-flex" v-if="item.exchangeDengVideoUrl">
									<text>换灯视频</text>
									<view class="uni-flex-item">{{item.exchangeDengVideoUrl}}</view>
								</view>
								<view class="uni-flex" v-if="item.jinKaPan && item.jinKaPan.includes('不')">
									<text>近光卡座</text>
									<view class="uni-flex-item">{{item.jinKaPan}}</view>
								</view>
								<view class="uni-flex" v-if="item.kapan && item.kapan.includes('不')">
									<text>远光卡座</text>
									<view class="uni-flex-item">{{item.kapan}}</view>
								</view>
								<view class="uni-flex" v-if="item.kpImgUrl && item.kpImgUrl != null">
									<text>卡座图片</text>
									<image style="width: 200rpx;" mode="widthFix" :src="item.kpImgUrl"></image>
								</view>
								<view class="uni-flex" v-if="item.jieMa && item.jieMa.includes('不')">
									<text>解码器</text>
									<view class="uni-flex-item">{{item.jieMa}}</view>
								</view>
								<view class="uni-flex" v-if="item.jmImgUrl && item.jmImgUrl != null">
									<text>解码器图片</text>
									<image style="width: 200rpx;" mode="widthFix" :src="item.jmImgUrl"></image>
								</view>
								<view class="uni-flex" v-if="item.fangchenzhao">
									<text>防尘罩</text>
									<view class="uni-flex-item">{{item.fangchenzhao}}</view>
								</view>
								<view class="uni-flex" v-if="item.installEasy">
									<text>安装难易</text>
									<view class="uni-flex-item">{{item.installEasy}}</view>
								</view>
								<view class="uni-flex" v-if="item.remark">
									<text>备 注</text>
									<view class="uni-flex-item">{{item.remark}}</view>
								</view>
								<view class="uni-flex" v-if="item.changeDengVideoUrl">
									<text>改装视频</text>
									<view class="uni-flex-item">{{item.changeDengVideoUrl}}</view>
								</view>
								<view class="uni-flex" v-if="item.originGlueType">
									<text>原胶类型</text>
									<view class="uni-flex-item">{{item.originGlueType}}</view>
								</view>
								<view class="uni-flex" v-if="item.standSupport">
									<text>专用支架</text>
									<view class="uni-flex-item">{{item.standSupport}}</view>
								</view>
								<!-- <view class="uni-flex" v-if="item.jieMa">
									<text>是否解码</text>
									<view class="uni-flex-item">{{item.jieMa}}</view>
								</view> -->
								<view class="uni-flex" v-if="item.allJoinRemark">
									<text>大灯总成</text>
									<view class="uni-flex-item">{{item.allJoinRemark}}</view>
								</view>
							</view>
							<view style="margin-top: 17px;margin-bottom: 46rpx;">
								<view style="display: flex; justify-content: space-between;">
									<view>
										<text class="section-label">格栅灯: <text @click="fetchProductList('格栅近光灯')"
												class="uni-flex-item-lamp">格栅近光灯</text></text>
									</view>
									<!-- 如果需要“更多”按钮，可以取消注释 -->
									<!-- <view>
							            <text class="section-label" @click="fetchProductList(item.wuDeng.trim())">更多</text>
							        </view> -->
								</view>
								<view class="product-grid">
									<view class="product-item" v-for="(gs, index) in grilleList.slice(0, 1)"
										:key="index">
										<view @click="skipToDetails(gs.categoryId)">
											<image :src="gs.productImage" mode="aspectFill" class="product-image">
											</image>
										</view>
									</view>
									<view class="product-info" @click="skipToDetails(gs.categoryId)"
										:style="{ width: grilleList.slice(0, 1).length === 1 ? '100%' : '48%' }"
										v-for="(gs, index) in grilleList.slice(0, 1)" :key="index">
										<text class="product-name">{{ gs.productName }}</text>
										<text style="font-weight: bold;" v-if="userType == 'STORE'"
											class="salePrice">￥{{ gs.proxyPrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'CAR'"
											class="salePrice">￥{{ gs.salePrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'SALE'"
											class="salePrice">￥{{ gs.productPrice }}</text>
									</view>
								</view>
							</view>
							<view>
								<view style="display: flex; justify-content: space-between;">
									<view>
										<text class="section-label">遥控线束: <text
												class="uni-flex-item-lamp">遥控线束</text></text>
									</view>
									<!-- 如果需要“更多”按钮，可以取消注释 -->
									<!-- <view>
							            <text class="section-label" @click="fetchProductList(item.wuDeng.trim())">更多</text>
							        </view> -->
								</view>
								<view class="product-grid">
									<view class="product-item" v-for="(gs, index) in harnessList.slice(0, 1)"
										:key="index">
										<view @click="skipToDetails(gs.categoryId)">
											<image :src="gs.productImage" mode="aspectFill" class="product-image">
											</image>
										</view>
									</view>
									<view class="product-info" @click="skipToDetails(gs.categoryId)"
										:style="{ width: harnessList.slice(0, 1).length === 1 ? '100%' : '48%' }"
										v-for="(gs, index) in harnessList.slice(0, 1)" :key="index">
										<text class="product-name">{{ gs.productName }}</text>
										<text style="font-weight: bold;" v-if="userType == 'STORE'"
											class="salePrice">￥{{ gs.proxyPrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'CAR'"
											class="salePrice">￥{{ gs.salePrice }}</text>
										<text style="font-weight: bold;" v-if="userType == 'SALE'"
											class="salePrice">￥{{ gs.productPrice }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="list" v-for="(item, index) in list" :key="index" v-show="index == active">
						<view class="uni-flex" v-if="item.jinDeng">
							<text>近 光</text>
							<view class="uni-flex-item-lamp" @click="fetchProductList(item.jinDeng)">{{item.jinDeng}}
							</view>
						</view>
						<view class="uni-flex" v-if="item.yuanDeng">
							<text>远 光</text>
							<view class="uni-flex-item-lamp" @click="fetchProductList(item.yuanDeng)">{{item.yuanDeng}}
							</view>
						</view>
						<view class="uni-flex" v-if="item.wuDeng">
							<text>雾 灯</text>
							<view class="uni-flex-item-lamp" @click="fetchProductList(item.wuDeng)">{{item.wuDeng}}
							</view>
						</view>
						<view class="info-item" v-if="carInfo.gsJinDengName && carInfo.gsJinDengName != null">
							<text class="label">格栅灯</text>
							<view class="value" @click="fetchProductList(carInfo.gsJinDengName)">
								{{carInfo.gsJinDengName}}
							</view>
						</view>
						<view class="info-item" v-if="carInfo.gsYuanDengName && carInfo.gsYuanDengName != null">
							<text class="label">格栅灯</text>
							<view class="value" @click="fetchProductList(carInfo.gsYuanDengName)">
								{{carInfo.gsYuanDengName}}
							</view>
						</view>

						<view class="info-item" v-if="carInfo.gsSize">
							<text class="label">格栅尺寸</text>
							<view class="value">{{carInfo.gsSize}}</view>
						</view>
						<view class="uni-flex" v-if="item.exchangeDengVideoUrl">
							<text>换灯视频</text>
							<view class="uni-flex-item">{{item.exchangeDengVideoUrl}}</view>
						</view>
						<view class="uni-flex" v-if="item.kapan">
							<text>专用卡座</text>
							<view class="uni-flex-item">{{item.kapan}}</view>
						</view>
						<view class="uni-flex" v-if="item.kpImgUrl && item.kpImgUrl != null">
							<text>卡座图片</text>
							<image style="width: 200rpx;" mode="widthFix" :src="item.kpImgUrl"></image>
						</view>
						<view class="uni-flex" v-if="item.jieMa">
							<text>解码器</text>
							<view class="uni-flex-item">{{item.jieMa}}</view>
						</view>
						<view class="uni-flex" v-if="item.jmImgUrl && item.jmImgUrl != null">
							<text>解码器图片</text>
							<image style="width: 200rpx;" mode="widthFix" :src="item.jmImgUrl"></image>
						</view>
						<view class="uni-flex" v-if="item.fangchenzhao">
							<text>防尘罩</text>
							<view class="uni-flex-item">{{item.fangchenzhao}}</view>
						</view>
						<view class="uni-flex" v-if="item.installEasy">
							<text>安装难易</text>
							<view class="uni-flex-item">{{item.installEasy}}</view>
						</view>
						<view class="uni-flex" v-if="item.remark">
							<text>备 注</text>
							<view class="uni-flex-item">{{item.remark}}</view>
						</view>
						<view class="uni-flex" v-if="item.changeDengVideoUrl">
							<text>改装视频</text>
							<view class="uni-flex-item">{{item.changeDengVideoUrl}}</view>
						</view>
						<view class="uni-flex" v-if="item.originGlueType">
							<text>原胶类型</text>
							<view class="uni-flex-item">{{item.originGlueType}}</view>
						</view>
						<view class="uni-flex" v-if="item.standSupport">
							<text>专用支架</text>
							<view class="uni-flex-item">{{item.standSupport}}</view>
						</view>
						<view class="uni-flex" v-if="item.jieMa">
							<text>是否解码</text>
							<view class="uni-flex-item">{{item.jieMa}}</view>
						</view>
						<view class="uni-flex" v-if="item.allJoinRemark">
							<text>大灯总成</text>
							<view class="uni-flex-item">{{item.allJoinRemark}}</view>
						</view>
					</view> -->


				</view>
			</view>
			<view class="news" v-if="list.length > 0">
				<view v-if="list[active].shareList.length > 0">
					<view class="box" v-for="(item, index) in list[active].shareList" :key="index">
						<view class="uni-inline-item hd">
							<image :src="item.headImgUrl || '../../../static/images/default_avatar.png'"></image>
							<view class="uni-flex-item">
								<view class="h3">{{item.userName}}</view>
								<view class="txt">{{item.createTime}}</view>
							</view>
							<!-- <view class="btn" @click="shareCard">分享</view> -->
							<view style="padding: 0 20rpx;">
								<u-button type="success" color="#06A972" size="small" text="分享" openType="share"
									shape="circle"></u-button>
							</view>
						</view>
						<view class="bd">
							<view class="p">{{item.shareContent}}</view>
							<view class="video">
								<block v-if="Object.prototype.toString.call(item.imgUrls) === '[object Array]'">
									<u-album :urls="item.imgUrls" :multipleSize="216" :space="10"
										:albumWidth="albumWidth"></u-album>
								</block>
								<block v-else>
									<image mode="aspectFill" :src="item.imgUrls" v-if="item.imgUrls"></image>
								</block>
								<video show-mute-btn="true" :src="item.videoUrl" v-if="item.videoUrl"></video>
							</view>
						</view>
						<view class="ft">
							<!-- <u-icon name="chat" size="48" :label="item.evalCount" @click="replyChange(item.evaluationId)"></u-icon> -->
							<u-icon name="thumb-up" size="48" :label="item.handCount"
								:color="item.isHand == 'N' || '#06A972'"
								@click="handlerLike(index, item.shareId)"></u-icon>
						</view>
					</view>
				</view>
				<view v-else>
					<u-empty mode="favor" icon="../../../../static/images/comment.png" text="暂无评论" width="320"
						height="320" textSize="24"></u-empty>
				</view>
			</view>
			<u-modal :show="replyShow" title="评论" @confirm="reply" @cancel="replyShow = false" showCancelButton>
				<u--textarea placeholder="这一刻的想法..." border="surround" height="200" v-model="content"
					type="number"></u--textarea>
			</u-modal>
			<!-- <view class="bottom" @click="goRelease">发布</view> -->
		</u-skeleton>
	</view>
</template>


<script>
	let isWidth = (uni.getSystemInfoSync().windowWidth - 65) / 4;
	import {
		mapGetters
	} from "vuex";
	import {
		getModelDetail,
		newSearchCarDetail
	} from '@/api/car.js';
	import {
		getList,
		getFamily
	} from '@/api/product.js';
	import {
		getAdvertisement,
	} from '@/api/common.js';
	export default {
		data() {
			return {
				harnessList: [],
				grilleList: [],
				selectSaleName: '',
				selectCC: '',
				jinKaPanList: [],
				kaPanList: [],
				jieMaList: [],
				jinDengGList: [],
				yuanDengGList: [],
				WuDengGList: [],
				WuDengList: [],
				yuanDengList: [],
				jinDengList: [],
				Inv1: 0,
				items1: ['车灯'],
				swiperList: [],
				modelId: 0,
				list: [],
				active: 0,
				isWidth: isWidth,
				yearLeft: 0,
				carId: 0,
				title: '',
				year: '',
				loading: true,
				replyShow: false,
				content: '',
			}

		},
		computed: {
			...mapGetters(["isLogin", 'uid', 'userType'])
		},
		onLoad(option) {
			let that = this;
			that.modelId = option.modelId || 0;
			that.title = option.title || '';
			that.selectSaleName = option.saleName || '';
			that.selectCC = option.cc || '';
			if (!that.modelId) {
				return that.$util.Tips({
					title: '车型不存在'
				}, {
					tab: 3
				});
			}

			// uni.setNavigationBarTitle({
			// 	title: that.title
			// })
			// uni.getSystemInfo({
			// 	success(e) {
			// 		that.isWidth = (e.windowWidth - 65) / 4;
			// 	}
			// });
			that.getModelDetail();
			that.getAdvertisement();
		},

		methods: {
			getDisplayName(item) {
				if (item.saleName) {
					return item.saleName;
				} else if (item.carYear) {
					return item.carYear;
				} else {
					return item.carName;
				}
			},
			onSaleNameChange(e) {
				this.selectedSaleName = this.saleNames[e.detail.value];
			},
			skipToDetails(categoryId) {
				const url = `/pages/goods/goods_detail/index?productId=${categoryId}&type=STORE`;
				uni.navigateTo({
					url: url,
				});

			},
			/**
			 * 获取产品系列
			 * @param {int}  dictId
			 */
			getFamily(dictId, name) {
				let that = this;
				getFamily({
					classification: dictId
				}).then(res => {
					if (name === '解码器') {
						if (res && res.value) {
							if (this.list[this.active].jieMa.includes("需要")) {
								res.value.forEach(item => {
									console.log("aaa");
									getList({
											typeId: item.typeId,
											itemName: item.itemName,
										})
										.then(res => {
											if (res && res.value && res.value.list) {
												this.jieMaList.push(res.value.list[0])
											}
										})
										.catch(err => {
											this.$util.Tips({
												title: err.message || "获取产品列表失败"
											});
										})
										.finally(() => {
											this.loading = false;
										});
								})
							} else {
								getList({
										itemName: this.list[this.active].jieMa.trim(),
									})
									.then(res => {
										if (res && res.value && res.value.list) {
											this.jieMaList.push(res.value.list[0])
										}
									})
									.catch(err => {
										this.$util.Tips({
											title: err.message || "获取产品列表失败"
										});
									})
									.finally(() => {
										this.loading = false;
									});
							}

						}
					} else if (name === '卡盘') {
						if (res && res.value) {
							if (this.list[this.active].kapan.includes("需要")) {
								res.value.forEach(item => {
									getList({
											typeId: item.typeId,
											itemName: item.itemName,
										})
										.then(res => {
											if (res && res.value && res.value.list) {
												this.kaPanList.push(res.value.list[0])
											}
										})
										.catch(err => {
											this.$util.Tips({
												title: err.message || "获取产品列表失败"
											});
										})
										.finally(() => {
											this.loading = false;
										});
								})
							} else {
								getList({
										itemName: this.list[this.active].kapan.trim(),
									})
									.then(res => {
										if (res && res.value && res.value.list) {
											this.kaPanList.push(res.value.list[0])
										}
									})
									.catch(err => {
										this.$util.Tips({
											title: err.message || "获取产品列表失败"
										});
									})
									.finally(() => {
										this.loading = false;
									});
							}

						}
					} else if (name === '近光卡盘') {
						if (res && res.value) {
							if (this.list[this.active].jinKaPan.includes("需要")) {
								res.value.forEach(item => {
									getList({
											typeId: item.typeId,
											itemName: item.itemName,
										})
										.then(res => {
											if (res && res.value && res.value.list) {
												this.jinKaPanList.push(res.value.list[0])
											}
										})
										.catch(err => {
											this.$util.Tips({
												title: err.message || "获取产品列表失败"
											});
										})
										.finally(() => {
											this.loading = false;
										});
								})
							} else {
								getList({
										itemName: this.list[this.active].jinKaPan.trim(),
									})
									.then(res => {
										if (res && res.value && res.value.list) {
											this.jinKaPanList.push(res.value.list[0])
										}
									})
									.catch(err => {
										this.$util.Tips({
											title: err.message || "获取产品列表失败"
										});
									})
									.finally(() => {
										this.loading = false;
									});
							}

						}
					} else if (name === "遥控") {
						res.value.forEach(item => {
							getList({
									typeId: item.typeId,
									itemName: item.itemName,
								})
								.then(res => {
									if (res && res.value && res.value.list) {
										this.harnessList.push(res.value.list[0])
									}
								})
								.catch(err => {
									this.$util.Tips({
										title: err.message || "获取产品列表失败"
									});
								})
								.finally(() => {
									this.loading = false;
								});
						})
					}
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},
			getDengList(itemName, dengName) {
				let name = itemName.trim();
				let specialKeyword = ""; // 用于存储特殊关键词，如“偏心”或“解码车灯”

				// 检测并处理特殊关键词
				if (name.includes("偏心")) {
					name = name.replace("偏心", "");
					specialKeyword = "偏心";
				} else if (name.includes("解码车灯")) {
					name = name.replace("解码车灯", "");
					specialKeyword = "解码车灯";
				}

				getList({
						itemName: name
					})
					.then(res => {
						if (res && res.value && res.value.list) {
							const productList = res.value.list;

							// 定义一个通用的筛选函数
							const filterItems = (list, keyword, targetList) => {
								if (specialKeyword) {
									list.forEach(item => {
										if (item.productName.includes(keyword)) {
											targetList.push(item);
										}
									});
								} else {
									list.forEach(item => {
										if (!item.productName.includes("偏心")) {
											targetList.push(item);
										}
									});
								}
							};

							// 根据 dengName 分类处理
							switch (dengName) {
								case "近灯":
									filterItems(productList, specialKeyword, this.jinDengList);
									break;
								case "远灯":
									filterItems(productList, specialKeyword, this.yuanDengList);
									break;
								case "雾灯":
									filterItems(productList, specialKeyword, this.WuDengList);
									break;
								case "双杯LED双光透镜":
									this.jinDengGList = productList;
									break;
								case "双直射LED双光透镜":
									this.yuanDengGList = productList;
									break;
								case "雾灯防水透镜":
									this.WuDengGList = productList;
									break;
								case "格栅":
									this.grilleList = productList;
									break;
								default:
									console.warn("未知的 dengName 类型:", dengName);
							}
						}
					})
					.catch(err => {
						this.$util.Tips({
							title: err.message || "获取产品列表失败"
						});
					})
					.finally(() => {
						this.loading = false;
					});
			},
			getAdvertisement() {
				getAdvertisement({})
					.then(res => {
						// 处理成功的响应
						if (res && res.value) {
							// 假设 res.value 是包含广告数据的数组
							this.swiperList = res.value.map(item => item.imgUrl);
						} else {
							console.error('未获取到广告数据');
						}
					})
					.catch(error => {
						// 错误处理
						console.error('获取广告数据失败:', error);
					});
			},
			fetchProductList(itemName) {
				if (itemName != 'LED') {
					getList({
							itemName: itemName,
						})
						.then(res => {
							if (res && res.value && res.value.list) {
								if (res.value.list.length === 1) {
									const categoryId = res.value.list[0].categoryId; // 获取唯一对象的 categoryId
									const url = `/pages/goods/goods_detail/index?productId=${categoryId}&type=STORE`;
									uni.navigateTo({
										url: url,
									});
								} else {
									const url =
										`/pages/goods/goods_list/index?typeId=${ res.value.list[0].itemTypeId }&itemName=${itemName}&type=${this.userType}`;
									uni.navigateTo({
										url: url,
									});
								}
							}
						})
						.catch(err => {
							// this.$util.Tips({
							// 	title: err.message || "获取产品列表失败"
							// });
						})
						.finally(() => {
							this.loading = false;
						});
				}
			},
			changeTab1(Inv1) {
				that.navIdx = Inv1;
			},

			goRelease() {
				this.$util.Tips('/pages/home/comment/index?carId=' + this.carId + '&title=' + this.title + '&year=' + this
					.year);
			},

			/**
			 * 获取车型列表
			 */
			getModelDetail() {
				let that = this;
				newSearchCarDetail({
					modelId: that.modelId,
					saleName: that.selectSaleName,
					cc: that.selectCC
				}).then(res => {
					that.list = res.value;

					if (this.list[that.active].jieMa == null || this.list[that.active].jieMa.trim() == '') {
						this.list[that.active].jieMa = '不需要解码'
						console.log("aa");
					}
					if (this.list[that.active].kapan == null || this.list[that.active].kapan.trim() == '') {
						this.list[that.active].kapan = '不需要远光卡座'
					}
					if (this.list[that.active].jinKaPan == null || this.list[that.active].jinKaPan.trim() == '') {
						this.list[that.active].jinKaPan = '不需要近光卡座'
					}

					that.selectedSaleName = that.list[that.active].saleName;
					that.carId = that.list[that.active].carId;
					that.year = that.list[that.active].carYear;
					//获取默认的第一个车型的近，远，雾
					if (this.list[that.active].jinDeng != null && this.list[that.active].jinDeng != '') {
						this.getDengList(this.list[that.active].jinDeng, "近灯")
					}
					if (this.list[that.active].yuanDeng != null && this.list[that.active].yuanDeng != '') {
						this.getDengList(this.list[that.active].yuanDeng, "远灯");
					}

					if (this.list[that.active].wuDeng != null && this.list[that.active].wuDeng != '') {
						this.getDengList(this.list[that.active].wuDeng, "雾灯");
					}

					this.getDengList("格栅近光灯", "格栅");
					this.getFamily(27, "遥控");

					//解码器
					if (this.list[that.active].jieMa != null) {
						this.getFamily(5, "解码器")
					}

					//卡盘
					if (this.list[that.active].kapan != null) {
						this.getFamily(4, "卡盘");
					}
					//近光卡盘
					if (this.list[that.active].jinKaPan != null) {
						this.getFamily(4, "近光卡盘");
					}
					//近灯G
					this.getDengList(this.list[that.active].jinDengG ? this.list[that.active].jinDengG :
						'双杯LED双光透镜', "双杯LED双光透镜")
					//远光G
					this.getDengList(this.list[that.active].yuanDengG ? this.list[that.active].yuanDengG :
						'双直射LED双光透镜', "双直射LED双光透镜")
					//雾光G
					this.getDengList(this.list[that.active].wuDengG ? this.list[that.active].wuDengG : '雾灯防水透镜',
						"雾灯防水透镜")
					that.loading = false;
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			/**
			 * 年份点击
			 * @param {int}  index
			 * @param {int}  carId
			 */
			yearClick(index, carId) {
				let that = this;
				that.active = index;
				that.carId = that.list[index].carId;
				that.year = that.list[index].carYear;

				// 清空当前列表
				that.jinDengList = [];
				that.yuanDengList = [];
				that.WuDengList = [];
				that.jieMaList = [];
				that.kaPanList = [];
				that.jinKaPanList = [];

				// 重新加载数据
				if (that.list[index].jinDeng) {
					that.getDengList(that.list[index].jinDeng, "近灯");
				}
				if (that.list[index].yuanDeng) {
					that.getDengList(that.list[index].yuanDeng, "远灯");
				}
				if (that.list[index].wuDeng) {
					that.getDengList(that.list[index].wuDeng, "雾灯");
				}

				if (this.list[that.active].jieMa == null || this.list[that.active].jieMa.trim() == '') {
					this.list[that.active].jieMa = '不需要解码'
					console.log("aa");
				}
				if (this.list[that.active].kapan == null || this.list[that.active].kapan.trim() == '') {
					this.list[that.active].kapan = '不需要远光卡座'
				}
				if (this.list[that.active].jinKaPan == null || this.list[that.active].jinKaPan.trim() == '') {
					this.list[that.active].jinKaPan = '不需要近光卡座'
				}

				//解码器
				if (this.list[index].jieMa != null) {
					this.getFamily(5, "解码器")
				}

				//卡盘
				if (this.list[index].kapan != null) {
					this.getFamily(4, "卡盘");
				}
				//近光卡盘
				if (this.list[index].jinKaPan != null) {
					this.getFamily(4, "近光卡盘");
				}
				console.log(that.carId);
				if (that.list.length > 1) {
					that.yearLeft = (index - 1) * that.isWidth;
					console.log(that.yearLeft)
				}
			},


			/**
			 * 点赞
			 */
			handlerLike(index, evaluationId) {
				let that = this,
					url;
				console.log(evaluationId);
				if (that.list[that.active].shareList[index].isHand == 'N') {
					that.list[that.active].shareList[index].isHand = 'Y';
					that.list[that.active].shareList[index].handCount++;
					url = 'share/hand';
				} else {
					that.list[that.active].shareList[index].isHand = 'N';
					that.list[that.active].shareList[index].handCount--;
					url = 'share/unHand';
				}
				that.$request.get(url, {
					mainId: evaluationId,
					shareEvalType: 'CUS_INFO',
					userInfoId: that.$store.state.app.uid
				}).then(res => {
					if (that.list[that.active].shareList[index].isHand == 'Y') {
						that.$util.Tips({
							title: '点赞成功'
						})
					} else {
						that.$util.Tips({
							title: '点赞已取消'
						})
					}
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			/**
			 * 分享
			 */
			shareCard() {
				uni.showShareMenu({
					//小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
				})
			},

			replyChange(evaluationId) {
				let that = this;
				that.replyShow = true;
				that.evaluationId = evaluationId;
			},

			/**
			 * 展示和收起
			 */
			setAll(item, index, num = 0) {
				let that = this;
				if (num == 0) {
					that.$set(that.evalList[index], 'showCount', item.evalReplyList.length, true);
				} else {
					that.$set(that.evalList[index], 'showCount', num, true);
				}
			}
		},

		// 分享到朋友
		onShareAppMessage(res) {
			let that = this;
			//这块需要传参，不然链接地址进去获取不到数据
			return {
				title: that.title,
				path: 'pages/home/detail/index?modelId=' + that.modelId + '&saleName=' + that.selectSaleName + '&cc=' +
					that.selectCC + '&title=' + that.title,
				imageUrl: ''
			};
		},

		//分享到朋友圈
		onShareTimeline(res) {
			let that = this;
			return {
				title: that.title,
				path: 'pages/home/detail/index?modelId=' + that.modelId + '&saleName=' + that.selectSaleName + '&cc=' +
					that.selectCC + '&title=' + that.title,
				imageUrl: '',
			}
		},
	}
</script>

<style>
	/* 标题区域 */
	.title-box {
		background-color: rgba(169, 169, 169, 0.3);
		padding: 10px;
		text-align: center;
		/* 与下方滚动区域之间的间距 */
		border-radius: 25rpx;
		width: 600rpx;
		margin: 0 auto;
		/* 水平居中 */
	}

	.model-detail {
		font-size: 35rpx;
		font-weight: bold;
		color: #333;
	}

	.sale-name-picker {
		margin: 20rpx 0;
		padding: 0 20rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.picker {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		font-size: 32rpx;
		color: #333;
	}

	.picker::after {
		content: '\25BC';
		/* 下拉箭头 */
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #999;
	}

	.product-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.product-item {
		width: 48%;
		height: 300rpx;
		/* 每个商品占据一半宽度，留出一些间距 */
		margin-top: 15rpx;
		/* 添加垂直间距 */
		text-align: center;
		background-color: rgba(0, 0, 0, .04);
		border-radius: 10%;
		margin-bottom: 10px;
	}

	.product-image {
		width: 230rpx;
		height: 200rpx;
		/* 设置固定高度，保持图片比例 */
		border-radius: 10rpx;
		margin-top: 30px;
	}

	.product-info {
		display: flex;
		flex-direction: column;
		/* 水平居中对齐 */
		width: 48%;
		/* 与图片宽度一致 */
	}

	/* 水平滚动容器 */
	.product-scroll-view {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		scroll-behavior: smooth;
		padding: 20rpx 0;
		margin-left: 70rpx;
	}

	.product-name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 20rpx;
	}

	.salePrice {
		font-size: 16px;
	}

	.car-box {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.info-item {
		display: flex;
		flex-direction: row;
		margin-top: 50rpx;
	}

	.car-info-section {
		display: flex;
		flex-direction: row;
		width: 100%;
		/* 占满整个屏幕 */
		padding: 20rpx;
		/* 内边距 */
		position: relative;
		/* 用于定位更多按钮 */
		gap: 20rpx;
		/* 子元素之间的间隙 */
	}

	.section-label {
		color: #727272;
		font-weight: bold;
	}

	.car-info-section>text:nth-child(2) {
		position: absolute;
		top: 0;
		right: 0;
		color: #666;
		/* 更多按钮颜色 */
		cursor: pointer;
		/* 鼠标悬停样式 */
	}

	.car-info-section>view {
		flex: 1;
		/* 平均分配宽度 */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 图片和文字居中 */
		margin-top: 50rpx;
		/* 与上方内容的间距 */
		margin-left: 70rpx;
	}

	.car-info-section>view>image {
		width: 150rpx;
		/* 图片宽度 */
		height: 150rpx;
		/* 图片高度 */
		margin-bottom: 5px;
		/* 图片与文字的间距 */
	}

	.product-info-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		font-size: 12px;
	}

	.product-info-bottom {
		margin-top: 5px;
		font-size: 12px;
		color: #666;
	}

	page {
		background: #F6F7F9;
	}

	.container {}

	.container .tab {
		display: flex;
		align-items: center;
		text-align: center;
		background: #fff;
	}

	.container .tab text {
		padding: 20rpx 0;
		position: relative;
		margin-right: 40rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;

	}

	.info-item:last-child {
		border-bottom: none;
	}

	.label {
		margin-right: 40rpx;
		color: #727272;
		width: 120rpx;
		text-align: justify;
		display: block;
		text-align-last: justify;
	}

	.container .tab .on {
		font-weight: bold;
		font-size: 36rpx;
		color: #06A972;
	}

	.container .tab .on::after {
		content: '';
		width: 72rpx;
		height: 4rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
		background: #06A972;
		border-radius: 2px 2px 2px 2px;
	}

	.swiper,
	.swiper image {
		height: 320rpx;
		border-radius: 20rpx;
		width: 100%;
		position: relative;
	}

	.dots {
		position: absolute;
		font-size: 24rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 30rpx;
		color: #fff;
		bottom: 20rpx;
		right: 30rpx;
		padding: 0 20rpx;
	}

	.item {
		padding: 0 40rpx;
		background-color: #fff;
	}

	/* .item .brdge {
		font-size: 24rpx;
		padding: 30rpx 0;
	}

	.item .brdge text {
		width: 113rpx;
		line-height: 51rpx;
		height: 51rpx;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		background: #F3F3F3;
		margin-right: 20rpx;
		border-radius: 26rpx;
		padding: 5rpx 15rpx;
	} */

	.item .brdge {
		white-space: nowrap;
		font-size: 24rpx;
		padding: 30rpx 0;
	}

	.item .brdge view {
		font-size: 24rpx;
		display: inline-block;
		vertical-align: middle;
		padding: 0 30rpx;
		line-height: 51rpx;
		text-align: center;
		margin-right: 20rpx;
		background: #F3F3F3;
		border-radius: 26rpx;
	}

	.item .brdge view.on {
		border: 1rpx solid #06A972;
		color: #06A972;
		background: rgba(6, 169, 114, 0.1);
	}

	.item .tit {
		font-weight: bold;
		padding: 30rpx 0;
		border-bottom: 1px solid #F2F2F2;
	}

	.item .list {
		line-height: 85rpx;
		padding: 20rpx 0;
	}

	.item .list text {
		margin-right: 40rpx;
		color: #727272;
		width: 112rpx;
		text-align: justify;
		display: block;
		text-align-last: justify;
	}

	.jichu {
		display: inline-block;
	}

	.news {
		background: #FFFFFF;
		padding: 0 40rpx;
		margin-top: 20rpx;
		padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}

	.news .box {
		border-bottom: 1rpx solid #F2F2F2;
	}

	.news .box:last-child {
		border: none !important;
	}

	.news .hd {
		padding: 30rpx 0;
	}

	.news .hd .h3 {
		font-weight: bold;
	}

	.news .hd .txt {
		color: #666666;
		font-size: 22rpx;
	}

	/* .news .hd button {
		font-size: 24rpx;
		background: #F3F3F3;
		border-radius: 50rpx;
		border: none;
	} */

	.news .hd .btn {
		padding: 8rpx 30rpx;
		font-size: 24rpx;
		background-color: #f3f3f3;
		border-radius: 50rpx;
		box-shadow: 0px 4px 4px 0px #e4d9d9;
	}

	.news .hd image {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.news .bd .p {
		padding: 0 0 20rpx;
	}

	.news .video {
		position: relative;
	}

	.news .video video {
		width: 100%;
	}

	.news .video .pic {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 72rpx;
		height: 72rpx;
	}

	.news .ft {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx 30rpx;
		/* color: #979797; */
	}

	.news .ft .u-icon~.u-icon {
		margin-left: 20rpx;
	}

	.bottom {
		position: fixed;
		right: 40rpx;
		bottom: calc(90rpx + constant(safe-area-inset-bottom));
		bottom: calc(90rpx + env(safe-area-inset-bottom));
		/* bottom: 80rpx; */
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 99;
		border-radius: 50%;
		background: #06A972;
		box-shadow: 0px 3px 6px 1px rgba(6, 169, 114, 0.16);
	}

	.u-textarea {
		background-color: #f4f5f7 !important;
	}

	.pd-b-20 {
		padding-bottom: 20rpx;
	}

	.pd-l-20 {
		padding-left: 20rpx;
	}

	.title {
		text-align: center;
		padding: 40rpx 0 20rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.uni-flex-item-lamp {
		color: #06A972;
		/* 设置字体颜色 */
		text-decoration: underline;
		/* 给文字加下划线 */
		text-underline-offset: 10rpx;
		margin-left: 18rpx;
	}
</style>